<template>
	<view class="cate-container">
		<scroll-view scroll-y="true" class="left-scroll"  :style="{height: wh + 'px'}">
            <block v-for="(item,i) in scrollList" :key='i '>
              <view class="left-scroll-item" :class="i === active ? 'active' : ''" @click="activeChange(i)">
                {{item.cat_name}}
              </view>
            </block>
		</scroll-view>
    
    <!-- 右侧的滚动区域 -->
    <scroll-view scroll-y="true" class="right-scroll" :style="{height: wh + 'px'}" :scroll-top="scrollTop">
    <view class="right-scroll-item" v-for="(item,i) in scrollList2.children" :key='i'>
            
            <view class="title">
             / {{item.cat_name}} /
            </view>
            
            <view class="content">
              <view class="img-box" v-for="(item2,i2) in item.children" :key='i2'  @click="gotoGoodsList(item2)">
                <view> {{item2.cat_name}} </view>
                <view>
                  <image :src="item2.cat_icon" mode="" class="img"></image>
                </view>
              </view>
            </view>    
            
      </view>
      
    </scroll-view>
	</view>
</template>

<script>
  import badgeMix from '@/mixins/tabBar-badge.js'
	export default {
    mixins:[badgeMix],
		data() {
			return {
				scrollList:[],
        scrollList2:[],
        wh:'',
        active:0,
        scrollTop:0
        }
		},
    onLoad() {
      const sysInfo = uni.getSystemInfoSync()
      this.wh = sysInfo.windowHeight
      this.getScrollList()
    },
    methods:{
      // 获取滚动的数据
      async getScrollList(){
        const {data:res} = await uni.$http.get('/categories')
        if(res.meta.status !== 200) return uni.$showMsg()
        this.scrollList = res.message
        this.scrollList2 = res.message[0]
      },
      // 点击更换active
      activeChange(i){
        this.active = i
        this.scrollList2 = this.scrollList[i]
        this.scrollTop = this.scrollTop ? 0 : 1
      },
      
      // 跳转到详情页
      gotoGoodsList(item2){
        uni.navigateTo({
          url:'/subpkg/goods_list/goods_list?cid=' + item2.cat_id
        })
      }
      
    }
	}
</script>

<style lang="scss">
.cate-container{
  display: flex;
  // width: 200rpx;
  .left-scroll{
    width: 200rpx;
  }
 
  .left-scroll-item{
    padding: 10rpx;
    height: 80rpx;
    width: 160rpx;
    text-align: center;
    background-color: #efefef;
    border: 1rpx solid white;
    line-height: 80rpx;
    }
    
    // 激活样式
    .active {
      background-color: #fff;
      position: relative;
      
      // 激活栏再左边的红线
      &::before {
        content: '';
        width: 7rpx;
        height: 70rpx;
        background-color: #c00000;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      
    }
    
    // 右侧滚动区域
    .right-scroll{
      .title{
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 25px;
        font-weight: blod;
        margin: 20rpx;
      }
      .content{
        display: flex;
        flex-wrap: wrap;
        .img-box{
          border-bottom: 1px solid #efefef;
          margin-top: 20rpx;
          width: 33.33%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .img{
            width: 60px;
            height: 60px;
          }
        }
      }
    }
}
</style>
